<template>
  <div class="p-20 page">
    <div class="mb-20">
      <strong>日期面板</strong>
      {{ date }}
      <date-panel type="date" v-model="date" value-format="yyyy 年 MM 月 dd 日"/>
    </div>
    <div class="mb-20">
      <strong>日期时间面板</strong>
      {{ dateTime }}
      <date-panel type="date" :show-time="true"  v-model="dateTime" value-format="yyyy 年 MM 月 dd 日 HH:mm:ss"/>
    </div>
    <div class="mb-20">
      <strong>日期范围面板</strong>
      {{ dateRange }}
      <date-panel type="daterange" v-model="dateRange" value-format="yyyy 年 MM 月 dd 日 HH:mm:ss"/>
    </div>
    <div class="mb-20">
      <strong>日期时间范围面板</strong>
      {{ dateTimeRange }}
      <date-panel type="daterange" :show-time="true" v-model="dateTimeRange" value-format="yyyy 年 MM 月 dd 日 HH:mm:ss"/>
    </div>
    <div class="mb-20">
      <strong>月份范围面板</strong>
      {{ months }}
      <date-panel type="monthrange" :show-time="true" v-model="months" value-format="yyyy 年 MM 月"/>
    </div>
  </div>
</template>

<script>
import DatePanel from '@/components/DatePanel'
export default {
  components: {
    DatePanel
  },
  data() {
    return {
      date: '',
      dateTime: '',
      dateRange: [],
      dateTimeRange: [],
      months: [],
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
</style>
